import React from 'react';
import { Container } from '@/components/common/container';
import { Toolbar, ToolbarActions, ToolbarHeading } from '@/layouts/demo1/components/toolbar';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Plus, Edit, Trash2 } from 'lucide-react';

// 静态模拟分类数据
const mockCategories = [
  {
    id: 1,
    name: '手机数码',
    description: '智能手机、平板电脑等数码产品',
    sort_order: 1,
    status: 'active',
  },
  {
    id: 2,
    name: '电脑办公',
    description: '笔记本电脑、台式机、办公设备',
    sort_order: 2,
    status: 'active',
  },
  {
    id: 3,
    name: '家用电器',
    description: '冰箱、洗衣机、空调等家电产品',
    sort_order: 3,
    status: 'inactive',
  },
];

const CategoryManagementPage = () => {
  return (
    <>
      <Container>
        <Toolbar>
          <ToolbarHeading
            title="分类管理"
            description="管理商品分类信息"
          />
          <ToolbarActions>
            <Button>
              <Plus className="size-4 me-2" />
              添加分类
            </Button>
          </ToolbarActions>
        </Toolbar>
      </Container>

      <Container>
        <Card>
          <CardHeader>
            <CardTitle>分类列表</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="relative w-full overflow-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>分类名称</TableHead>
                    <TableHead>描述</TableHead>
                    <TableHead>排序</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {mockCategories.map(category => (
                    <TableRow key={category.id}>
                      <TableCell className="font-medium">{category.name}</TableCell>
                      <TableCell className="max-w-xs truncate">
                        {category.description || '-'}
                      </TableCell>
                      <TableCell>{category.sort_order || 0}</TableCell>
                      <TableCell>
                        <Badge variant={category.status === 'active' ? 'success' : 'destructive'}>
                          {category.status === 'active' ? '启用' : '禁用'}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Button variant="ghost" size="sm">
                            <Edit className="size-4" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Trash2 className="size-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      </Container>
    </>
  );
};

export default CategoryManagementPage; 